<template>
  <div class="videooSet">
    <div class="deco-control-group">
      <div class="label">视频:</div>
      <el-radio-group v-model="value.surfacePlot" @change="value.customUrl=''">
        <el-radio :label="1">选择视频</el-radio>
        <el-radio :label="2">粘贴视频地址</el-radio>
      </el-radio-group>
    </div>

    <div class="video-upload-area">
      <div v-if="value.surfacePlot==1">
        <div class="tag">建议视频宽高比16:9</div>
        <div class="con">
          <div class="videoItem item" 
               v-if="value.customUrl!=''">
            <video controls="none" 
                   style="width:100%;height:100%"
                   webkit-playsinline="" 
                   playsinline="" 
                   x5-playsinline="" 
                   :src="value.customUrl" 
                   poster="" 
                   controlslist="">当前浏览器不支持最新的video播放</video>
            <i class="el-icon-error deleteicon"
               @click="deleteVideos"></i>
          </div>
          <div class="item" v-if="value.customUrl==''" @click="addVideo">
            <i class="el-icon-plus deco-editor-card-add-icon"></i>
          </div>
        </div>
        <div class="msg" v-if="value.customUrl==''">请添加视频</div>
      </div>
      <div v-if="value.surfacePlot==2">
        <div class="tag">小程序 v2.15 及以上版本支持仅支持.mp4格式的视频源地址</div>
        <div class="con">
          <input class="ipt" type="text" v-model="value.customUrl" placeholder="此处粘贴视频播放地址">
        </div>
        <div class="msg">请填写视频地址</div>
      </div>
    </div>

    <div class="deco-control-group">
      <div class="label">封面图:</div>
      <el-radio-group v-model="value.sourceFrom" @change="value.surfacePlotImage=''">
        <el-radio :label="1">原视频封面</el-radio>
        <el-radio :label="2">自定义封面</el-radio>
      </el-radio-group>
    </div>
    <div class="coverImg-area video-upload-area">
      <div v-if="value.sourceFrom==2">
        <div class="tag">建议图片宽高比16:9</div>
        <div class="con">
          <div class="videoItem item"
               v-if="value.surfacePlotImage!=''">
            <img :src="value.surfacePlotImage" alt="">
            <i class="el-icon-error deleteicon"
               @click="deleteCoverImg"></i>
          </div>
          <div class="item" v-if="value.surfacePlotImage==''" @click="isShowImgDialog=true">
            <i class="el-icon-plus deco-editor-card-add-icon"></i>
          </div>
        </div>
        <div class="msg" v-if="value.surfacePlotImage==''">请添加封面</div>
      </div>
    </div>

    <!-- 上传视频弹窗 b -->
    <el-dialog
      custom-class="video-dialog"
      title=""
      :close-on-click-modal="false"
      :modal-append-to-body="true"
      :append-to-body='true'
      :visible.sync="isShowVideoDialog"
      center
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="我的视频" name="first">
          <p class="none-tip">还没有上传任何视频, 去上传</p>
        </el-tab-pane>
        <el-tab-pane label="本地上传" name="second">
          <el-form :model="videoForm" :rules="rules" ref="videoForm" label-width="100px" class="demo-videoForm">
            <el-form-item label="本地视频" prop="name">
              <upload class="uploadVideo-wrap" 
                      ref="videoUpload" 
                      :limit='1'
                      accept='.mp4, .mov, .m4v, .flv, .x-flv, .mkv, .wmv, .avi, .rmvb, .3gp, video/mp4, video/x-m4v, video/*'
                      :showBtn='false'>
                <div class="slot">
                  +
                </div>
              </upload>
              <div class="tag">点击“+”选择视频，视频大小不超过 100 MB，建议时长在5分钟以 内， 建议宽高比16:9<br/>
              支持的视频文件类型包括：mp4,mov,m4v,flv,x-flv,mkv,wmv,avi,rmvb,3gp</div>
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input v-model="videoForm.name" placeholder="最长不超过20个字" maxlength="20" style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="分组" prop="name">
              <el-select v-model="videoForm.name" placeholder="请选择" style="width:240px">
                <el-option label="未分组" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="封面" prop="name">
              <div class="cover-item-box">
                <div class="cover-item">
                  <a v-if="videoForm.coverImg==''" class="rc-video-upload__cover-add" href="javascript:;">+ 添加封面</a>
                  <img v-else :src="videoForm.coverImg" alt="">
                </div>
                <div v-if="videoForm.coverImg!=''" class="edit-btn">修改</div>
              </div>

              <div class="tag">建议尺寸：800 x 800 像素，支持jpg、gif、png三种格式，大小不超过3 MB。如果不添加封面，系统会默认截取视频的第一个画面作为封面</div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-checkbox v-model="agree" v-if="activeName!='first'">同意《<a href="https://bbs.youzan.com/thread-665143-1-1.html" target="_blank" rel="noopener noreferrer">视频上传服务协议</a>》</el-checkbox>
        <el-button type="primary" @click="saveVideoBtn" :disabled="!agree&&activeName!='first'">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 上传视频弹窗 e -->

    <!-- 图片上传弹窗 b -->
    <!-- <add-img :isShowImgDialog='isShowImgDialog'
             @closeDialog='closeImgDialog'
             @saveImgBtn='saveImgBtn'></add-img> -->
    <!-- 图片上传弹窗 e -->

  </div>
</template>

<script>
import ImgDemo from '../assets/img/hotel.jpg';
import Upload from './upload';
// import AddImg from 'src/components/AddImg/index.vue';

export default {
  props: ['value'],
  components: { 
    Upload,
    // AddImg
  },
  data(){
    return{
      ImgDemo,    
      // 上传视频弹窗
      isShowVideoDialog:false,
      activeName:'first',
      rules:{
        name:[
          { required: true, message: '请输入不超过20个字的视频名称', trigger: 'blur' },
        ]
      },
      videoForm:{
        name:'',
        coverImg:ImgDemo
      },
      // 是否同意视频上传协议
      agree:false,
      // 图片上传弹窗
      isShowImgDialog:false,
    }
  },
  methods:{
    // 打开添加视频弹窗
    addVideo(){
      this.isShowVideoDialog=true;
      this.activeName='first';
      this.$nextTick(()=>{
        this.$refs.videoUpload.fileUrlArr=[];
        this.$refs.videoUpload.clearFiles();
      })
    },
    // 删除已选视频
    deleteVideos(index){
      this.value.customUrl=''
    },
    // 删除已选封面
    deleteCoverImg(index){
      this.value.surfacePlotImage=''
    },   
    // 视频弹窗保存按钮
    saveVideoBtn(){
      this.value.customUrl=this.$refs.videoUpload.fileUrlArr[0];
      this.isShowVideoDialog = false;
    },
    // 关闭图片弹窗
    closeImgDialog(){
      this.isShowImgDialog = false;
    },
    // 图片弹窗保存按钮
    saveImgBtn(val){
      this.value.surfacePlotImage=val;
      this.closeImgDialog()
    }
  }
}
</script>

<style lang='less'>
.videooSet{
  .deco-control-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    .label{
      color: #969799;
    }
  }
  .video-upload-area{
    padding: 16px;
    background-color: #f7f8fa;
    .tag{
      margin-bottom: 16px;
      font-size: 12px;
      color: #969799;
    }
    .con{
      &:after{
        content: ' ';
        display: block;
        clear: both;
      }
      .item{
        position: relative;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        display: block;
        width: 62px;
        height: 62px;
        line-height: 62px;
        position: relative;
        text-align: center;
        border: none;
        background: #fff;
        box-shadow: 0 2px 4px 0 rgba(52,57,65,.2);
        border-radius: 2px;
        font-size: 24px;
        color: #155bd4;
        cursor: pointer;
        border: 1px solid transparent;
        &.videoItem:hover{
          border-color: #155bd4;
          .deleteicon{
            visibility: visible;
          }
        }        
        .deleteicon{
          position: absolute;
          cursor: pointer;
          font-size: 20px;
          right: -10px;
          top: -10px;
          color: #bbb;
          background: #fff;
          border-radius: 50%;
          visibility: hidden;
          z-index: 2;
        }
        img{
          width: 100%;
          max-height: 100%;
          border-radius: 2px;
        }
      }
      .ipt{
        color: #323233;
        display: inline-block;
        min-width: 80px;
        height: 30px;
        box-sizing: border-box;
        padding: 0 10px;
        margin: 0;
        font-size: 14px;
        box-shadow: none;
        appearance: none;
        outline: none;
        border: 1px solid #dcdee0;
        border-radius: 2px;
        transition: border .2s ease-in-out,box-shadow .2s ease-in-out,background-color 3600s;
      }
    }
    .msg{
      margin-top: 10px;
      font-size: 12px;
      color: #d40000;
    }
  }
  .coverImg-area{
    background-color: #fff;
  }
}
.slot{
  position: relative;
  display: inline-block;
  width: 100px;
  height: 60px;
  border: 2px dashed #ddd;
  line-height: 51px;
  box-sizing: border-box;
  text-align: center;
  font-size: 36px;
  color: #ddd;
  overflow: hidden;
  text-decoration: none;
}
// 视频上传弹窗
.video-dialog {
  .none-tip{
    margin-top: 200px;
    text-align: center;
  }
  .el-dialog__headerbtn{
    z-index: 999;
  }
  .el-dialog__body{
    height: 460px;
  }
  .el-dialog__header{
    padding: 0;
  }
  .dialog-footer{
    text-align: right;
  }
  
  .demo-videoForm{
    .tag{
      margin-top: 10px;
      line-height: 16px;
      font-size: 12px;
      color: var(--theme-stroke-3,#969799);
    }
    .edit-btn{
      position: absolute;
      bottom: 8px;
      left: 88px;
      line-height: 1;
      display: block;
      cursor: pointer;
      color: rgb(0, 0, 238);
      font-size: 12px;
    }
    .cover-item-box{
      position: relative;
      &:after{
        content:' ';
        display: block;
        clear: both;
      }
    }
    .cover-item{
      float: left;
      margin-right: 5px;
      display: block;
      width: 78px;
      height: 78px;
      line-height: 78px;
      text-align: center;
      border: 1px solid #ddd;
      font-size: 12px;
      cursor: pointer;
      overflow: hidden;
      img{
        width: 100%;
      }
      a{
        text-decoration: none;
      }
    }
  }
}

</style>